<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>
<script>
test(() => assert_selection(
    '<div contenteditable>f    |oo   bar    baz</div>',
    selection => {
        for (var i = 0; i < 7; ++i)
            selection.modify('extend', 'forward', 'character');
    },
    '<div contenteditable>f    ^oo   bar |   baz</div>'),
    'extend forward character on characters');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '|a<img src="../../resources/abe.png">new<br>',
            'nation    <i>  </i> <img src="../../resources/abe.png">',
            '',
            '',
            'conceived<br>',
            'nation<img src="../../resources/abe.png">',
        '</div>',
    ].join(' '),
    selection => {
        for (var i = 0; i < 31; ++i)
            selection.modify('extend', 'forward', 'character');
    },
    [
        '<div contenteditable>',
            '^a<img src="../../resources/abe.png">new<br>',
            'nation    <i>  </i> <img src="../../resources/abe.png">',
            '',
            '',
            'conceived<br>',
            'nation|<img src="../../resources/abe.png">',
        '</div>',
    ].join(' ')),
    'extend forward character through image');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '<i>F    |and seven</i> years <b>  as </b>our fathers  f upon this',
            'continent, a new nation, conceived &nbsp;&nbsp; in Liberty,   and dedicated to the',
            'proposition that all<br>',
            'men are created equal.',
        '</div>',
    ].join(' '),
    selection => {
        for (var i = 0; i < 156; ++i)
            selection.modify('extend', 'forward', 'character');
    },
    [
        '<div contenteditable>',
            '<i>F    ^and seven</i> years <b>  as </b>our fathers  f upon this',
            'continent, a new nation, conceived \u{00A0}\u{00A0} in Liberty,   and dedicated to the',
            'proposition that all<br>',
            'men are created equal|.',
        '</div>',
    ].join(' ')),
    'extend forward character through multiple spaces');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'a<img src="../../resources/abe.png">new<br>',
            'nation    <i>  </i> <img src="../../resources/abe.png">',
            '',
            '',
            'conceived<br>',
            'nation|<img src="../../resources/abe.png">',
        '</div>',
    ].join(' '),
    selection => {
        for (var i = 0; i < 28; ++i)
            selection.modify('extend', 'backward', 'character');
    },
    [
        '<div contenteditable>',
            'a<img src="../../resources/abe.png">n|ew<br>',
            'nation    <i>  </i> <img src="../../resources/abe.png">',
            '',
            '',
            'conceived<br>',
            'nation^<img src="../../resources/abe.png">',
        '</div>',
    ].join(' ')),
    'extend backward character through image');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '<i>F    and seven</i> years <b>  as </b>our fathers  f upon this',
            'continent, a new nation, conceived &nbsp;&nbsp; in Liberty,   and dedicated to the',
            'proposition that all<br>',
            'men are created equ|al.',
        '</div>',
    ].join(' '),
    selection => {
        for (var i = 0; i < 156; ++i)
            selection.modify('extend', 'backward', 'character');
    },
    [
        '<div contenteditable>',
            '<i>|F    and seven</i> years <b>  as </b>our fathers  f upon this',
            'continent, a new nation, conceived \u{00A0}\u{00A0} in Liberty,   and dedicated to the',
            'proposition that all<br>',
            'men are created equ^al.',
        '</div>',
    ].join(' ')),
    'extend backward character through multiple spaces');

test(() => assert_selection(
    '<div contenteditable><span> |foo</span>  </div>',
    selection => {
        for (var i = 0; i < 4; ++i)
            selection.modify('extend', 'forward', 'character');
    },
    '<div contenteditable><span> ^foo|</span>  </div>'),
    'extend forward character over element');
</script>
